<script>
import { getPageInfo } from '@admin/api/common';
import CDPlugin from '@admin/plugins/cd';
import { useRouteStore } from '@/store/modules/route/index';
import { usePageStore } from '@/admin/store/modele/page';
import LoadingPage from '../loading-page/index.vue';
import {
  T1101,
  // T1102,
  // T1110,
  // T1111,
  T1120,
  T1130,
  T1140,
  T1150,
  // T1160,
  T1170
} from '../Templates/index';
import baseVue from './baseVue.vue';

// 临时存储父页面数据
const pPage = {
  code: ''
};
export default {
  name: 'CommonPage',
  components: {
    Tem1101: T1101,
    // Tem1102: T1102,
    // Tem1110: T1110,
    // Tem1111: T1111,
    Tem1120: T1120,
    Tem1130: T1130,
    Tem1140: T1140,
    Tem1150: T1150,
    // Tem1160: T1160,
    Tem1170: T1170,
    LoadingPage
  },
  extends: baseVue,
  provide() {
    return {
      commonPage: this
    };
  },
  props: {
    ccode: { type: String, default: '' },
    id: { type: String, default: '' },
    isTabPage: { type: Boolean, default: false }
  },
  data() {
    return {
      pageInfo: {},
      routeCode: this.$route.meta.code
    };
  },
  computed: {
    isLoading() {
      const pageStore = usePageStore();
      return pageStore.requestPending;
    },
    currentTemplate() {
      if (this.templatecode) {
        return `tem${this.templatecode}`;
      }
      return 'LoadingPage';
    },
    code() {
      return this.ccode || this.routeCode;
    },
    templatecode() {
      return this.pageInfo.tmp;
    }
  },
  watch: {
    pageInfo: {
      deep: true,
      handler(value) {
        const pageStore = usePageStore();
        pageStore.setPageInfo(value);
      }
    },
    isLoading(newvalue) {
      if (newvalue) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'Loading',
          background: 'rgba(0, 0, 0, 0.4)'
        });
      } else {
        this.loadingInstance.close();
      }
    }
  },
  beforeCreate() {
    /**
     * 生命周期 0 新页面beforeCreated 1 新页面creted 获取旧页面code，弹框页面需要关闭后还原code 2 新页面beforemount 3 旧页面beforedestory
     * 调用_unset方法销毁页面,可能会还原$CD 4 旧页面destoryed 5 新页面mounted 重新设置$CD
     */
    // 父code，用来加载页面code
    pPage.code = window?.$CD?.code || '';
    // 初始化$CD
    window.$CD = {
      pageInfo: {},
      treeId: '',
      treeInfo: {},
      code: '',
      pcode: '',
      pageId: '',
      callback: {},
      fieldEvent: {}, // 自定义事件
      fieldRule: {}, // 自定义规则
      fieldAttr: {} // 自定义属性
    };
  },
  mounted() {
    window.$CD.pcode = pPage.code;
    if (!this.code) {
      this.$message({
        type: 'warning',
        message: '模板code不存在'
      });
    } else {
      this.initPageInfo();
    }
  },
  activated() {
    console.log('commonpage activated');
    this.onActivated();
  },
  deactivated() {
    console.log('commonpage deactivated');
    this.onDeactivated();
  },
  beforeUnmount() {
    CDPlugin._unset({ code: this.code, pcode: pPage.code });
  },
  methods: {
    onActivated() {
      if (this.templatecode == '1130') {
        return;
      }
      CDPlugin._reset(this.code);
      this.$refs.tpl && typeof this.$refs.tpl.onActivated === 'function' && this.$refs.tpl.onActivated();
    },
    onDeactivated() {
      this.$refs.tpl && typeof this.$refs.tpl.onDeactivated === 'function' && this.$refs.tpl.onDeactivated();
    },
    initPageInfo() {
      const routeStore = useRouteStore();
      const menus = routeStore.searchMenus;
      const pageId = this.code || '';
      const pageName = menus.find(i => i.id === this.code)?.name || '';
      window.$CD.code = this.code;
      window.$CD.pageId = pageId;
      window.$CD.pageName = pageName;
      const param = {
        pageId
      };
      getPageInfo(param).then(res => {
        this.pageInfo = res.data;
        window.$CD.pageInfo = this.pageInfo;
        CDPlugin._set(window.$CD);
        this.$emit('pageInfoLoaded', this.pageInfo);
      });
    },
    // 还原全局变量
    restoreGlobal() {
      window.$CD.code = this.code;
      const pageId = this.code;
      const pageName = this.pageInfo.name;
      window.$CD.pageId = pageId;
      window.$CD.pageName = pageName;
      window.$CD.pageInfo = this.pageInfo;
      const pageStore = usePageStore();
      pageStore.setPageInfo(this.pageInfo);
    }
  }
};
</script>

<template>
  <div>
    <slot name="page-top" />
    <component :is="currentTemplate" :id="id" ref="tpl" :page-info="pageInfo" :code="code">
      <slot />
    </component>
    <slot name="page-bottom" />
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
